<%@ page import="org.springframework.util.StringUtils" %>
<%@page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>


<head>

    <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-3.4.1.min.js"></script>


    <style type="text/css">
        .content {
            margin: 5px;
            background-color: #fff;
        }

        * {
            box-sizing: border-box;
            -moz-box-sizing: border-box;
            margin: 0px;
            padding: 0px
        }

        .tbmain {
            width: 100%;
            table-layout: fixed;
            border-bottom: 1px solid rgb(233, 237, 236);
            border-collapse: collapse;
        }

        .tbmain tr td {
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            -o-text-overflow: ellipsis;
            font-size: 13px;
            line-height: 3;
            padding: 2px 2px;
            vertical-align: middle;
            color: #292929;
            text-align: center;
        }

        .noshow {
            display: none;
        }

        .show {
            display: inline;
        }

    </style>
    <script type="text/javascript">


    </script>
</head>


<div class="content">
    <div class="tbmain-responsive">

        <table class="tbmain">
            <thead>
            <tr>
                <th style="width: 8%">名字</th>
                <th style="width: 8%">地址</th>
                <th style="width: 8%">电话</th>
                <th style="width: 8%"><a href="javascript:void(0);"
                                         onclick="add();">添加</a></th>
            </tr>
            </thead>
            <tbody id="addBody">
            <c:forEach items="${list}" var="resume" varStatus="status">
                <tr>
                   <input type="hidden" value="${resume.id}" id="id${status.index}"/>
                    <td><span class="after${status.index}">${resume.name}</span><input
                            class="before${status.index} noshow" type="text" value="${resume.name}"
                            id="name${status.index}"></td>
                    <td><span class="after${status.index}">${resume.address}</span><input
                            class="before${status.index} noshow" type="text" value="${resume.name}"
                            id="address${status.index}"></td>
                    <td><span class="after${status.index}">${resume.phone}</span><input
                            class="before${status.index} noshow" type="text" value="${resume.name}"
                            id="phone${status.index}"></td>
                    <td>

                        <a href="javascript:void(0);" class="after${status.index}"
                           onclick="update(${status.index})">修改</a>
                        <a href="javascript:void(0);" class="before${status.index} noshow"
                           onclick="cancle(${status.index})">取消</a>

                        <a href="javascript:void(0);" class="after${status.index}"
                           onclick="deleteResume(${resume.id});">删除</a>
                        <a href="javascript:void(0);" class="before${status.index} noshow"
                           onclick="updateResume(${status.index});">保存</a>

                    </td>
                </tr>
            </c:forEach>
            </tbody>
        </table>
    </div>
</div>

<script type="text/javascript">
    //添加框展示
    var leng =${fn:length(list)};
    function add() {
        var text = "<tr class='tr" + leng + "'>" +
            "<td ><input type='text'id='name" + leng + "'/></td>" +
            "<td ><input type='text'id='address" + leng + "'/></td>" +
            "<td ><input type='text'id='phone" + leng + "'/></td>" +
            "<td><a  href='javascript:void(0)' onclick='save(" + leng + ")' >保存</a> <a  href='javascript:void(0)' onclick='remove(" + leng + ")' >删除</a></td><tr/>"
        $("#addBody").append(text);
        leng++;
    }

    //修改页面展示
    function update(index) {
        $(".before" + index).removeClass("noshow");
        $(".after" + index).addClass("noshow");
    }
    //更新数据
    function updateResume(index) {
        var id=document.getElementById("id"+index).value;
        var name=document.getElementById("name"+index).value;
        var address=document.getElementById("address"+index).value;
        var phone=document.getElementById("phone"+index).value;
        $.ajax({
            url: '${pageContext.request.contextPath}/resume/update',
            type: 'post',
            dataType: 'json',
            data: {id:id,name:name,address:address,phone:phone},
            async: false,
            success: function (res) {
                if(res.status==200){
                    alert(res.msg);
                    location.reload()
                }else {
                    alert(res.msg);
                }

            }
        });
    }

    //删除数据
    function deleteResume(id) {
        $.ajax({
            url: '${pageContext.request.contextPath}/resume/delete/'+id,
            type: 'get',
            dataType: 'json',
            async: false,
            success: function (res) {
                if(res.status==200){
                    alert(res.msg);
                    location.reload()
                }else {
                    alert(res.msg);
                }

            }
        });
    }
    //取消更新页面
    function cancle(index) {
        $(".before" + index).addClass("noshow");
        $(".after" + index).removeClass("noshow");
    }
    //删除添加的行
    function remove(index) {
        $(".tr" + index).remove();
    }

    //数据保存
    function save(index) {
        var name=document.getElementById("name"+index).value;
        var address=document.getElementById("address"+index).value;
        var phone=document.getElementById("phone"+index).value;
        $.ajax({
            url: '${pageContext.request.contextPath}/resume/save',
            type: 'post',
            dataType: 'json',
            data: {name:name,address:address,phone:phone},
            async: false,
            success: function (res) {
               if(res.status==200){
                   alert(res.msg);
                   location.reload()
               }else {
                  alert(res.msg);
               }

            }
        });
    }
</script>

